<template>
  <div class="test">
    <div class="svg-list">
      <h2>svg组件使用</h2>
      <svg-icon icon-class="add" color="red" width="40" height="40"></svg-icon>
      <svg-icon icon-class="apiplay" color="blue"></svg-icon>
      <svg-icon icon-class="delete" color="purple"></svg-icon>
      <svg-icon icon-class="logo" color="red" width="60" height="60"></svg-icon>
      <svg-icon icon-class="eye" color="orange"></svg-icon>
      <svg-icon icon-class="news" color="orange"></svg-icon>
      <svg-icon icon-class="password" color="orange"></svg-icon>
      <svg-icon icon-class="play" color="orange"></svg-icon>
      <svg-icon icon-class="reject" color="orange"></svg-icon>
      <svg-icon icon-class="user" color="orange"></svg-icon>
    </div>
    <div class="echart-wrapper">
      <h2>ecahrt使用</h2>
      <echart-process></echart-process>
    </div>
  </div>
</template>

<script lang="ts">
import EchartProcess from './cpns/echart-process.vue'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'test',
  components: { EchartProcess },
  setup() {
    return {}
  }
})
</script>

<style scoped lang="less">
.test {
  .svg-list {
    margin-bottom: 80px;
  }
}
</style>
